<template>
  <!-- 添加或修改对话框 -->
  <!-- <dt-dialog :title="title" :confirm-hidden="true" :visible.sync="open" @comfirmBtn="submitForm" @closeDialog="close">
  <div slot="content">
    <parser v-if="isParser" ref="parserForm" :form-conf="formConf" :is-preview="true" @submit="sumbitParser" />
  </div>
  </dt-dialog> -->
  <el-drawer
    lock-scroll
    :modal-append-to-body="true"
    append-to-body
    title="预览"
    :visible.sync="open"
    size="95%"
  >
    <div class="previewParser" :style="{
      '--size':formConfSize,
      '--color':formConfColor,
      '--bold':formConfBold,
      '--incline':formConfIncline,
      '--underline':formConfUnderline}">
      <Parser v-if="isParser" ref="parserForm" :form-conf="formConf"
              :is-preview="false" />
    </div>
  </el-drawer>
</template>

<script>
import Parser from '@/framework/views/developer-center/application-center/application-system/applicationFormDesign/components/parser'
import { getformDesign } from '@/framework/api/formDesign/formDesign'
import { deepClone } from '@/framework/utils/index'

export default {
  name: 'FormDesignPreview',
  components: {
    Parser
  },
  data() {
    return {
      // 弹出层标题
      title: '预览',
      // 是否显示弹出层
      open: false,
      previewContent: '',
      drawingList: [],
      formConf: {},
      isParser: true
    }
  },
  computed: {
    formConfSize() {
      return this.formConf.fontStyle?.fontSize
    },
    formConfColor() {
      return this.formConf.fontStyle?.fontColor
    },
    formConfBold() {
      return this.formConf.fontStyle?.bold ? 'bold' : 'normal'
    },
    formConfIncline() {
      return this.formConf.fontStyle?.incline ? 'italic' : 'normal'
    },
    formConfUnderline() {
      return this.formConf.fontStyle?.underline ? 'underline' : 'none'
    }
  },
  created() {
  },
  methods: {
    submitForm() {
      this.$refs.parserForm.submitForm()
    },
    sumbitParser() {
      this.$message.success('校验通过')
    },
    // 取消按钮
    close() {
      this.$refs.parserForm.resetForm()
    },
    handlePreview(row) {
      this.isParser = false
      const data = row
      this.drawingList = data.fields
      this.formConf = deepClone(data)
      this.open = true
      this.$forceUpdate()
      setTimeout(() => {
        this.isParser = true
      }, 0)
    }
  }
}
</script>
<style lang="scss" scoped>
::v-deep .drawing-item-copy,::v-deep .drawing-item-delete{
  display: none;
}
::v-deep .el-drawer .el-drawer__body{
  background: #F2F5F8;
  padding:24px 0px;
}
.previewParser{
  background: #fff;
  padding: 24px;
  height: auto;
  min-height: 100%;
  width: 1430px;
  margin: auto;

::v-deep .el-form-item__label{
      font-size: var(--size) !important;
      color: var(--color) !important;
      font-weight: var(--bold) !important;
      font-style: var(--incline) !important;
      text-decoration: var(--underline) !important;
}
::v-deep .el-collapse{
  margin-bottom: 22px;
}
}
</style>
